<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">

<div th:replace="~{component/head::head}"></div>

<body>

<div th:replace="~{component/header::header}"></div>

<div class="container-fluid">
  <div class="row">

    <div th:replace="~{component/nav::nav}"></div>

    <main id="app" class="col-md-9 ms-sm-auto col-lg-10 px-md-4 p-4">

      <div class="row marketing mt-5">
        <div v-for="product in products" :key="product.id" class="col-lg-4">
          <h4>冲值：<span class="text-danger font h1">{{product.price}}</span>&nbsp;元</h4>
          <br>
          <p><a @click="createOrder(product)" class="btn btn-primary">立即冲值 &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->

    </main>
  </div>
</div>

<script>
  // 下面这行声明在一个页面只能有一次，header里已经有了，所以这里去掉
  // const {createApp, ref} = Vue;
  const app = createApp({
    setup() {
      const products = ref([{
        id: 1,
        price: 0.1,
      }, {
        id: 2,
        price: 0.2,
      }, {
        id: 3,
        price: 0.3,
      }]);

      const createOrder = function (product) {
        axios.post("/pay/order-info/add", {
          "business": ORDER_INFO_BUSINESS.DEPOSIT.key,
          "amount": product.price,
          "desc": "充值" + product.price + "元",
          "snapshot": {
            "productId": product.id,
            "productName": "充值" + product.price + "元",
            "productPrice": product.price,
            "productCount": 1
          }
        }).then((response) => {
          const data = response.data;
          if (data.success) {
            window.location.href="cash";
            SessionStorage.set("ORDER", data.content);
          } else {
            Msg.warning("下单失败");
          }
        });
      };

      onMounted(() => {
      });

      return {
        products,
        createOrder,
      }
    }
  });
  app.mount("#app");
</script>

</body>
</html>
